<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Upload via jQuery ;)</title>
        <link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css">
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="../js/jquery.form.js"></script>
        <script type="text/javascript" src="uploader.js"></script>
        <style type="text/css">
            .upload-hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <form action="uploader.php" enctype="multipart/form-data" method="GET" class="well">
                <span>File1</span> : <input type="text" id="file1" name="file1" value="" class="sf-uploader" size="60"><br>
                <span>File2</span> : <input type="text" id="file2" name="file2" value="" class="sf-uploader" size="60"><br>
                <span>File3</span> : <input type="text" id="file3" name="file3" value="" class="sf-uploader" size="60"><br>
                <span>File4</span> : <input type="text" id="file4" name="file4" value="" class="sf-uploader" size="60"><br>
                <span>File5</span> : <input type="text" id="file5" name="file5" value="" class="sf-uploader" size="60"><br>
                <button type="button" class="btn btn-primary">Déverrouiler</button>
            </form>
            <div>
                File 1 : <span id="msg1"></span><br>
                File 2 : <span id="msg2"></span><br>
                File 3 : <span id="msg3"></span><br>
                File 4 : <span id="msg4"></span><br>
                File 5 : <span id="msg5"></span><br>
            </div>
        </div>
        <script type="text/javascript">
            $(function(){
                $('.sf-uploader').sfUploader({
                    url: 'uploader.php',
                    path: 'uploads'
                });
                var updateMsg = function(){
                    $('#msg1').html('').hide().delay(500).html($('#file1').val()).fadeIn('fast');
                    $('#msg2').html('').hide().delay(500).html($('#file2').val()).fadeIn('fast');
                    $('#msg3').html('').hide().delay(500).html($('#file3').val()).fadeIn('fast');
                    $('#msg4').html('').hide().delay(500).html($('#file4').val()).fadeIn('fast');
                    $('#msg5').html('').hide().delay(500).html($('#file5').val()).fadeIn('fast');
                };
                setInterval(updateMsg, 30000);
                $('.btn-primary').click(function(e){
                    e.preventDefault();
                    $('form input').each(function(){
                        var $this = $(this);
                        val = parseInt($this.attr('data-lock'));
                        lock = (isNaN(val)) ? 0 : val;
                        if(lock === 0){
                            $this.attr('data-lock', 1);
                        }else{
                            $this.attr('data-lock', 0);
                        }
                    });
                });
            });
        </script>
    </body>
</html>